<template>
  <div class="main">
    <section>
      <!--选择日期-->
        <el-form :inline=true class="demo-form-inline">
          <el-form-item label="年份">
            <el-date-picker
              v-model="choseYear"
              type="year"
              value-format = "yyyy"
              :picker-options="timeLimit"
              :clearable = false
              style="width:120px"
              placeholder="请选择年份">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="initHistory(choseYear)" icon="el-icon-search">搜索对账记录</el-button>
            <el-button v-if="rightsButtons['add']" type="success" @click="$router.push({name: 'SalesFinanceAdd'})" icon="el-icon-plus">新建对账单</el-button>
          </el-form-item>
        </el-form>

      <!--历史记录-->
      <aside>历史对账记录</aside>
      <el-table
        :data="history"
        border
        header-row-class-name="table-header"
        style="width: 100%; margin-bottom: 50px">
        <el-table-column
          align="center"
          width="100"
          label="对账月份">
          <template slot-scope="scope">
            {{ scope.row.batchNo }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createdAt"
          width="150"
          label="创建对账单时间">
        </el-table-column>
        <el-table-column
          align="center"
          prop="orderTotal"
          label="订单收款">
        </el-table-column>
        <el-table-column
          prop="orderRefundTotla"
          align="center"
          label="订单退款">
        </el-table-column>
        <el-table-column
          align="center"
          prop="alipayTotal"
          class-name="ali"
          label="支付宝收款">
        </el-table-column>
        <el-table-column
          align="center"
          prop="alipayRefundTotal"
          label="支付宝退款">
        </el-table-column>
        <el-table-column
          align="center"
          prop="wechatpayTotal"
          width="100"
          label="微信收款">
        </el-table-column>
        <el-table-column
          align="center"
          prop="wechatpayRefundTotal"
          label="微信退款">
        </el-table-column>
        <el-table-column
          align="center"
          prop="unionpayTotal"
          label="云闪付收款">
        </el-table-column>
        <el-table-column
          align="center"
          prop="unionpayRefundTotal"
          label="云闪付退款">
        </el-table-column>
        <el-table-column
          align="center"
          prop="diffPrice"
          label="差异金额">
          <template slot="header">
            <span>差异金额</span>
            <el-tooltip class="item" effect="dark" :content="tips" placement="top-end">
              <a class="el-icon-question"></a>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="220"
          fixed="right" v-if="rightsButtons['view'] || rightsButtons['download']">
          <template slot-scope="scope">
            <a v-if="rightsButtons['view']"  @click="$router.push({name: 'SalesFinanceView',  params: {statisticsNo: scope.row.statisticsNo, time: scope.row.batchNo}})"><el-button size="mini" type="primary">查看</el-button></a>
            <template v-if="rightsButtons['download']">
              <el-button size="mini" @click="download(scope.row)">点击下载</el-button>
              <!-- <a v-if="scope.row.status === 10" :href="scope.row.excelPath"><el-button size="mini">点击下载</el-button></a>
              <a v-else-if="scope.row.status === 20" v-loading="true">正在生成中</a> -->
            </template>
            <!-- <el-button v-if="rightsButtons['rebuild'] && scope.row.status !== 20" type="text" size="small"  @click="$router.push({path: '/reconciliation/rebuild',  query: {time: scope.row.batchNo}})">重新对账</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
  import { uploadFile, getUploadList, getStatisticsList, checkBills, creatBills, reCreatBills, exportBill } from '@/api/reconciliation'
  export default {
    name: "SalesFinance",
    data() {
      return {
        listLoading: true,
        tips: '差异金额 =（支付宝收款 - 支付宝退款 + 微信收款 - 微信退款）-（订单收款 - 订单退款）',
        timeLimit: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        fileTitle: '',
        current: 0,
        dialogFormVisible: false,
        loading: false,
        choseYear: this.getYear(),
        history: [],
      }
    },
    created() {
      this.initHistory()
    },
    methods: {
      // 历史记录排序
      sortHistory(arr) {
        arr.sort(function (a, b) {
          if(a.time>b.time){
            return -1
          }else if ( a.time<b.time){
            return 1
          }
        })
        return arr
      },

      // 获取今年时间
      getYear() {
        let date = new Date;
        let year = date.getFullYear().toString();
        return year;
      },

      // 获取历史对账数据
      async initHistory() {
        const res = await getStatisticsList(parseInt(this.choseYear))
          let arr = res.data
          arr.forEach(item => {
            item.batchNo = item.batchNo.toString().slice(0, 4)+ '-' +item.batchNo.toString().slice(4)
          })
          // arr = this.sortHistory(arr)
          this.history = arr
      },
      // 点击下载
      download(item) {
        // window.open()
        exportBill(item.statisticsNo).then(res => {
          let arr = res.data
          window.open(arr, '_self')
        })
      }
    }
  }
</script>

<style scoped>
  .main>section{
    padding: 24px;
    background: #fff;
  }
  .svg-icon { width: 1.2em; height: 1.2em; vertical-align: middle }
  .aliPay { color: #00a1e9 }
  .weChat { color: #40b737 }
  .ali { background-color: #00a1e9 }
</style>
